 <template>
  <div class="swiperbanner">
    <!-- 
          swiper 组件 轮播容器
                ref="mySwiper" 获取组件实例
                options='swiperOptions' 配置项

          swiper-slide 组件 轮播得每一项内容

    -->
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in banner" :key="item.id">
        <img :src="item.imgUrl" alt />
      </swiper-slide>

      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>

    <!-- 右侧标号 -->
    <div class="num">
      <span>{{num}}</span>
      /{{banner.length}}
    </div>
    <!-- 右侧固定得文案 -->
    <div class="info">{{banner[num-1].desc}}</div>
  </div>
</template>
 <script>
export default {
  name: "carrousel",
  props: ["banner"],
  data() {
    //方法1： 接受data函数里面的this --指向组件实例 访问data里面变量
    var that = this;
    return {
      num: 1,
      swiperOptions: {
        //swiper配置项
        // pagination: {
        //   el: ".swiper-pagination"
        // },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        loop: true,
        //事件----
        on: {
          //   slideChangeTransitionStart: function() {
          //       //this指向swiper对象
          //     console.log(this.activeIndex);
          //     if(this.activeIndex==4){
          //         that.num=1
          //     }else{
          //         that.num = this.activeIndex;
          //     }
          //   },
          //方法2： slideChangeTransitionStart修改箭头函数没有this
          //this---指向当前组件实例
          slideChangeTransitionStart: () => {
            console.log(this);
            //获取swiper
            //vue知识点：this.$nextTick(()=>{ })  延迟加载 等Vue dom元素加载完毕后再去指向回调函数
            this.$nextTick(() => {
              //   console.log(this.$refs.mySwiper.swiper);
              console.log("计算属性", this.swiper);
              console.log("下标", this.swiper.activeIndex);
              if (this.swiper.activeIndex == 4) {
                this.num = 1;
              } else {
                this.num = this.swiper.activeIndex
              }
            });
          }
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  }
  //   mounted() {
  //     console.log("Current Swiper instance object", this.swiper);
  //     this.swiper.slideTo(3, 1000, false);
  //   }
};
</script>

<style scoped lang='less'>
.swiperbanner {
  height: 400px;
  position: relative;
  img {
    width: 100%;
    height: 400px;
  }

  .num {
    position: absolute;
    right: 20px;
    bottom: 50px;
    font-size: 20px;
    color: #fff;
    z-index: 2;
    span {
      font-size: 30px;
    }
  }
  .info {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
    z-index: 2;
  }
}
</style>